<template>
    <div>
      <avue-crud
        :option="option"
        :data="data"
        :page.sync="page"
        :table-loading="loading"
        @on-load="onLoad"
        @current-change="currentChange"
        @search-change="searchChange"
        @search-reset="resetChange"
      >
        <template slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-download"
            size="small"
            :disabled="page.total == 0"
            :loading="downLoading"
            @click.stop="handleDownload"
          >导出</el-button>
        </template>
        <template
          slot="org"
          slot-scope="scope"
        >
          <span>{{scope.row.dept_pvalue}}</span>
        </template>
      </avue-crud>
    </div>
  </template>
  
  <script>
  import { getOffice } from '@/utils/org.js'
  import { tjJrjg } from '@/api/operate.js'
  export default {
    data() {
      return {
        data: [],
        loading: false,
        downLoading: false,
        searchList: {},
        /* 分页 */
        page: {
          pageSize: 10,
  
          pageSizes: [10, 20, 40, 50, 100],
          pagerCount: 5,
          layout: 'total, sizes, prev, pager, next, jumper',
  
          currentPage: 1,
          total: 0,
          background: false,
        },
        option: {
          headerAlign: 'center',
          align: 'center',
          border: true,
          index: true,
          indexLabel: '序号',
          indexWidth: 100,
          card: true,
          defaultExpandAll: true,
          dialogDrag: false,
          labelWidth: 135,
          viewBtn: false,
          delBtn: false,
          editBtn: false,
          addBtn: false,
          excelBtn: false,
          selection: false,
          searchLabelWidth: '25%',
          searchSpan: 6,
          searchMenuSpan: 4,
          columnBtn: false,
          refreshBtn: false,
          selectClearBtn: false,
          // searchBtn: true,
          menu: false,
          searchShowBtn: false,
  
          column: [
            {
              label: '批次',
              prop: 'pici',
              display: false,
            },
            {
              label: '金融机构全称',
              prop: 'finance_Org_Full_Name',
              display: false,
            },
            {
              label: '累计放款企业数',
              prop: 'loan_enterprise_num',
              display: false,
            },
            {
              label: '放款金额（万元）',
              prop: 'loan_amount',
              display: false,
            },
            {
              label: '放款笔数',
              prop: 'loan_num',
              display: false,
            },
            {
              label: '信用放款金额（万元）',
              prop: 'credit_loan_amount',
              display: false,
            },
            {
              label: '信用放款笔数',
              prop: 'credit_loan_num',
              display: false,
            },
          ],
        },
      }
    },
    created() {
      getOffice().then((res) => {
        this.option.column[0].dicData = res
      })
    },
    methods: {
      onLoad() {
        let searchList = this.searchList
        let params = {
          ...searchList,
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
        }
        this.loading = true
        tjJrjg(params).then((data) => {
          if (data.status) {
            this.loading = false
            this.data = data.data.records
            this.page.total = Number(data.data.total)
          }
        })
      },
      /* 清空 */
      resetChange() {
        this.page.currentPage = 1
        this.page.pageSize = 10
        this.searchList = {}
        this.onLoad()
      },
      /* 搜索筛选 */
      searchChange(params, done) {
        done()
        this.page.currentPage = 1
        this.searchList = {
          ...params,
        }
        this.onLoad()
      },
      /* 改变页码 */
      currentChange(currentPage) {
        this.page.currentPage = currentPage
      },
      handleDownload() {
        let searchList = this.searchList
        let params = {
          ...searchList,
          pageNum: 1,
          pageSize: this.page.total,
        }
        this.downLoading = true
        tjJrjg(params).then((res) => {
          this.downLoading = false
          if (res.status) {
            let data = res.data.records
            let opt = {
              title: '平台统计-金融机构维度',
              column: this.option.column.map(item => {
                const { label,prop } = item;
                return {
                    label,
                    prop
                }
              }),
              data: data,
            }
            this.$Export.excel({
              title: opt.title,
              columns: opt.column,
              data: opt.data,
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      },
    },
  }
  </script>
  
  <style scoped="scoped" lang="scss">
  /deep/ .avue-crud__pagination {
    text-align: center;
  }
  // /deep/ .avue-crud .el-table th{
  //     background: #559beb;
  //     color: #fff;
  // }
  </style>
  